<template>
<div class="rel report-list">
	<!-- 疾病定义 -->
	<div v-if="reportVal.ITEMS">
		<div class="disease-overview">
			<div class="disease-view">
				<p class="disease-view-content2"><span class="disease-name" @click="diseaseDetail()" v-text="reportVal.DISEASE_NAME"></span><span v-text="'（'+reportVal.DISEASE_TYPE+'）'"></span></p>
				<p class="disease-view-content3">
					<span class="disease-view-content3-1" v-for="item in reportVal.LABEL_NAME" :key="item"><img src="./image/star.png">{{item}}</span>
				</p>
			</div>
		</div>
		<div v-for="item in reportVal.ITEMS" :key="item.LABEL_NAME" v-if="item.LABEL_NAME">
			<div class="report-detail-content">
				<div class="report-title" v-text="item.LABEL_NAME"></div>
				<p class="report-detail-content1" v-if="item.NAME"><span>【条款要求】</span><span v-text="item.NAME"></span></p>
				<p class="report-detail-content2" v-if="item.EVALUATION_DEGREE"><span>点评：</span><span :class="{defectdegree:item.EVALUATION_DEGREE=='严重缺陷',commondegree:item.EVALUATION_DEGREE=='一般缺陷'}" v-text="item.EVALUATION_DEGREE"></span></p>
				<p class="report-detail-content3" v-text="item.EVALUATION_DESC"></p>
			</div>
		</div>
		<div v-else class="label-name-null">敬请期待...</div>
		<disease-float :diseaseContent="reportVal" v-show="diseaseFlo" @closeFloat="closeFloatt"></disease-float>
	</div>
	<!-- 非疾病定义 -->
	<div v-if="reportVal.LABEL_REGULATION&&reportVal.LABEL_REGULATION.EVALUATION_DESC">
		<div class="report-title">{{reportKey | fil}}</div>
		<div class="report-detail-content">
			<p class="report-detail-content1" v-if="reportVal.LABEL_REGULATION.LABEL_NAME"><span>【条款要求】</span><span>{{reportVal.LABEL_REGULATION.LABEL_NAME}}</span></p>
			<p class="report-detail-content2" v-if="reportVal.LABEL_REGULATION.EVALUATION_DEGREE"><span>点评：</span><span :class="{defectdegree:reportVal.LABEL_REGULATION.EVALUATION_DEGREE=='严重缺陷',commondegree:reportVal.LABEL_REGULATION.EVALUATION_DEGREE=='一般缺陷'}" v-text="reportVal.LABEL_REGULATION.EVALUATION_DEGREE"></span></p>
			<p class="report-detail-content3" v-text="reportVal.LABEL_REGULATION.EVALUATION_DESC"></p>
		</div>
	</div>
</div>
</template>

<script>
import DiseaseFloat from '../../components/disease-float/disease-float.vue'
export default {
	name: 'report-item',
	props: ['reportVal', 'reportKey'],
	components: {
		DiseaseFloat
	},
	data() {
		return {
			diseaseFlo: false //疾病名称浮层flag
		}
	},
	filters: {
		fil(value) {
			switch (value) {
				case 'WAITING_PERIOD':
					return '等待期'
					break;
				case 'PAYMENT_TIMES':
					return '给付次数'
					break;
				case 'RESIDUAL_LIABILITY':
					return '全残责任'
					break;
				case 'MINOR_CLAIMS':
					return '轻症赔付'
					break;
				case 'EXEMPTION_CLAUSE':
					return '免责条款'
					break;
				case 'WAIVER_PREMIUM':
					return '保费豁免'
					break;
				case 'LIABILITY_DEATH':
					return '身故责任'
					break;
				case 'INSURED_INCOME':
					return '投保收益'
					break;
				case 'HOSPITAL_IDENTIFICATION':
					return '医院认定'
					break;
				case 'NOTIFICATION_PERIOD':
					return '通知期'
					break;
				case 'AUTOMATIC_PAYMENT':
					return '自动垫付'
					break;
				case 'DEDUCTION_PAID':
					return '减额交清'
					break;
				case 'POLICY_LOAN':
					return '保单贷款'
					break;
				case 'COMPLAINT_RATE':
					return '投诉率'
					break;
				case 'PAY_ABILITY':
					return '偿付能力'
					break;
				default:
					break;
			}
		}
	},
	methods: {
		diseaseDetail() {
			this.diseaseFlo = true;
		},
		closeFloatt() {
			this.diseaseFlo = false;
		}
	}
}
</script>

<style scoped>
.disease-overview {
	color: #74A2DF;
}

.disease-view {
	background: url(./image/disease-view-bg.png) no-repeat;
	background-size: 90% 100%;
	background-position: center;
	margin: .35rem 0;
	box-sizing: border-box;
	padding: .1rem .7rem;
	line-height: .7rem
}

.disease-view p {
	margin: 0;
}

.disease-name {
	color: #F2D870;
	text-decoration: underline
}

.disease-view-content3-1 {
	margin-right: .35rem;
	font-size: .25rem
}

.disease-view-content3-1 img {
	width: .3rem;
}

.report-title {
	background: url(./image/report-detail-title.png) no-repeat;
	color: #FCFCFD;
	background-size: 100%;
	background-position: .3rem;
	padding-left: .5rem;
	box-sizing: border-box;
	font-size: .3rem;
	line-height: .7rem;
	height: .7rem;
	margin: .3rem 0 0;
}

.report-list p {
	box-sizing: border-box;
	padding: 0 .35rem;
	font-size: .3rem;
	margin: 0;
	line-height: .5rem
}

.report-detail-content {
	margin: .3rem 0;
}

.report-detail-content1 {
	color: #E4F0FF;
}

.report-detail-content2,
.report-detail-content3 {
	color: #88B0E7;
}
.label-name-null{
	color: #ccc;
	box-sizing: border-box;
	padding-left: .6rem;
}
.defectdegree,
.commondegree {
	display: inline-block;
	font-size: .2rem;
	width: 1.25rem;
	text-align: center;
	color: #131D3B;
}

.defectdegree {
	background: url(./image/serious-defect.png) no-repeat;
	background-size: 1.25rem .35rem;
	background-position: center;
}

.commondegree {
	background: url(./image/common-defect.png) no-repeat;
	background-size: 1.25rem .35rem;
	background-position: center;
}
</style>
